<template>
  <div class="allCard">
    <header>
      <span @click="$router.push('/layout/my')">
      <svg-icon iconClass="back"/></span>
      <span>银行卡</span>
      <span>...</span>
    </header>
    <div class="listBox">
      <van-cell-group>
        <div class="oop">
          <svg-icon iconClass="logo1"></svg-icon>
          <van-field v-model="value1" label="建设银行 储蓄卡 (8888)" class="input" label-width="150px" />
          <svg-icon iconClass="dele" @click="delebtn()"></svg-icon>
        </div>
        <div class="oop">
          <svg-icon iconClass="logo2"></svg-icon>
          <van-field v-model="value1" label="农业银行 储蓄卡 (6666)" class="input" label-width="150px" />
          <svg-icon iconClass="dele" @click="delebtn()"></svg-icon>
        </div>
        <div class="oop">
          <svg-icon iconClass="logo3"></svg-icon>
          <van-field v-model="value1" label="中国银行 储蓄卡 (6666)" class="input" label-width="150px" />
          <svg-icon iconClass="dele" @click="delebtn()"></svg-icon>
        </div>
      </van-cell-group>
      <button @click="addGo()">+添加银行卡</button>
    </div>
    <div class="box"></div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      value1:"",
      value2:""
    }
  },
  methods: {
    delebtn() {
      this.$router.push("/addCard");
      document.querySelector(".oop").innerHTML = "";
    },
    addGo() {
      this.$router.push("./cardInfo");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.oop {
  display: flex;
  align-items: center;
  padding: 0 px2rem(10);
  justify-content: space-between;
}
.input {
  height: px2rem(50);
  padding: 0 px2rem(5);
  line-height: px2rem(50);
}
button {
  border: 0;
  width: 100%;
  height: px2rem(50);
  background: #fff;
  color: skyblue;
  font-weight: bold;
}
.box {
  width: 350px;
  height: 300px;
  background: #eee;
  margin: 0 auto;
}
.allCard {
  width: 100%;
  height: 100%;
  font-size: px2rem(18);
  header {
    height: px2rem(50);
    display: flex;
    justify-content: space-between;
    padding: 0 px2rem(20);
    align-items: center;
  }
}
</style>